<template>
  <div class="ol-popup overlayPopup" ref="overlayRef" v-show="state.sttp !== 'GLS' && state.sttp !== 'VV' && state.sttp !== 'CP' && state.sttp !== 'WZ'">
    <div class="ol-popup-closer" @click="handleClickCloser"></div>
    <div class="popupContent">
      <h3 class="title">
        <div class="name">
          <p>{{ state.name }}</p>
          <span class="trapezoid" style="background: #28d38c; right: -6px"></span>
          <span class="trapezoid" style="background: #4ce3a4; right: -11px"></span>
          <span class="trapezoid" style="background: #7eedbe; right: -16px"></span>
          <span class="trapezoid" style="background: #b5fddf; right: -21px"></span>
        </div>
      </h3>
      <div class="stationImage" v-if="state.stationImage && state.stationImage !==''">
        <a-image
          width="100%"
          height="100%"
          :src="urlhttp + '/' + state.stationImage"
          :preview="{
            src: urlhttp + '/' + state.previewImage,
          }"
        />
      </div>
      <span style="padding-left: 10px" class="time" v-if="state.monitorData.zTm || state.monitorData.ts || state.monitorData.tm">
        {{ state.monitorData?.zTm || state.monitorData.ts || dayjs(state.monitorData.tm).format('YYYY-MM-DD HH:mm') }}
      </span>
      <!-- 墒情 -->
      <ul class="list" v-if="state.sttp == 'SS'">
        <li class="listItem">
          <p>10公分含水率</p>
          <h3 style="padding-left: 10px" :class="{isOut: formatIsOut(state.monitorData?.h10Out)}">
            <strong>{{ state.monitorData?.h10 || '--' }}</strong>
            <span v-html="formatIsTrend(state.monitorData?.h10Trend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>20公分含水率</p>
          <h3 style="padding-left: 10px" :class="{isOut: formatIsOut(state.monitorData?.h20Out)}">
            <strong>{{ state.monitorData?.h20 || '--' }}</strong>
            <span v-html="formatIsTrend(state.monitorData?.h20Trend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>40公分含水率</p>
          <h3 style="padding-left: 10px" :class="{isOut: formatIsOut(state.monitorData?.h40Out)}">
            <strong>{{ state.monitorData?.h40 || '--' }}</strong>
            <span v-html="formatIsTrend(state.monitorData?.h40Trend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 河道水文站 -->
      <ul class="list" v-if="state.sttp == 'ZZ'">
        <li class="listItem">
          <p>流量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.qOut)}">
            <strong>{{ state.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(state.monitorData?.qTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.zOut)}">
            <strong>{{ state.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.zTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 渠道站 -->
      <ul class="list" v-if="state.sttp == 'CZ'">
        <li class="listItem">
          <p>水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.zOut)}">
            <strong>{{ state.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.wptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>流量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.qOut)}">
            <strong>{{ state.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(state.monitorData?.qwptn)"></span>
          </h3>
        </li>
      </ul>
      <!-- 湖泊、水库、泵站 -->
      <ul class="list" v-if="state.sttp == 'LK' || state.sttp == 'RR' || state.sttp == 'DP'">
        <li class="listItem">
          <p>水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.zOut)}">
            <strong>{{ state.monitorData?.z || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.zwptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>流量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.qOut)}">
            <strong>{{ state.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(state.monitorData?.qTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 闸门 -->
      <ul class="list" v-if="state.sttp == 'DD'">
        <li class="listItem">
          <p>闸内水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.inzOut)}">
            <strong>{{ state.monitorData?.inz || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.inzTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>闸外水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.otzOut)}">
            <strong>{{ state.monitorData?.otz || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.otzTrend)"></span>
          </h3>
        </li>
      </ul>
      <!-- 雨量站 -->
      <ul class="list" v-if="state.sttp == 'PP'">
        <li class="listItem">
          <p>实时降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.pOut)}">
            <strong>{{ state.monitorData?.p || '--' }} mm</strong>
            <span v-html="formatIsTrend(state.monitorData?.pTrend)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>日降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.dypOut)}">
            <strong>{{ state.monitorData?.dyp || '--' }} mm</strong>
            <span v-html="formatIsTrend(state.monitorData?.dypTrend)"></span>
          </h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import Overlay from 'ol/Overlay';
  import dayjs from 'dayjs';

  const urlhttp = window.localStorage.getItem("GET_IMG_HTTP");
  const overlayRef = ref<HTMLDivElement | null>(null);
  const state = reactive({
    overlay: null,
    name: '',
    sttp: '',
    stationImage: '',
    previewImage: '',
    intervalId: null,
    monitorData: {},
  });

  const props = defineProps({
    globalMap: { type: Object },
    stationData: { type: Array },
  });

  watch(
    () => props.globalMap,
    () => {
      initOverlay();
    }
  );

  watch(
    () => props.stationData,
    (val) => {
      if (val?.length > 0) {
        clear();
        setOverlayPopupContent(val);
      }
    },
    { deep: true }
  );

  const formatIsTrend = (data) => {
    if (!data) { return '' }
    let showText = ''
    let classStyle = ''
    if (Number(data) === 2) {
      showText = '↓'
      classStyle = 'greenText'
    } else if (Number(data) === 1) {
      showText = '↑'
      classStyle = 'redText'
    } else {
      showText = 'ㅡ'
      classStyle = 'blueText'
    }
    return `<span class=${classStyle}>${showText}</span>`
  }

  const formatIsOut = (data) => {
    let isOut = false
    if (data && Number(data) === 0) { isOut = true }
    return isOut;
  }

  const clear = ()=> {
    clearInterval(state.intervalId); //清除计时器
    state.intervalId = null; //设置为null
  }

  const setOverlayPopupContent = (pickFeaturesData)=> {
    for (let i = 0; i < pickFeaturesData.length; i++) {
      // 设置 Overlay的坐标位置
      let coordinates;
      if (pickFeaturesData[0].LGTD) {
        coordinates = [pickFeaturesData[0].LGTD, pickFeaturesData[0].LTTD];
      } else if (pickFeaturesData[0].lgtd) {
        coordinates = [pickFeaturesData[0].lgtd, pickFeaturesData[0].lttd];
      } else {
        coordinates = pickFeaturesData[0].geometry.getCoordinates();
      }
      let name = '';
      if (pickFeaturesData[0].stnm) {
        name = pickFeaturesData[0].stnm;
      } else if (pickFeaturesData[0].name) {
        name = pickFeaturesData[0].name;
      } else {
        name = '';
      }
      state.stationImage = pickFeaturesData[0].files ? pickFeaturesData[0].files[0].smallPath : '';
      state.previewImage = pickFeaturesData[0].files ? pickFeaturesData[0].files[0].path : '';
      state.name = name;
      state.monitorData = pickFeaturesData[0].monitorData || pickFeaturesData[0];
      state.sttp = pickFeaturesData[0].sttp;
      state.overlay?.setPosition(coordinates);
    }
  }

  const initOverlay = ()=> {
    const olMap = props.globalMap;
    const overlay = new Overlay({
      id: 'OverlayPopup',
      element: overlayRef.value,
      autoPan: false,
    });
    state.overlay = overlay;
    olMap.addOverlay(overlay);
  }

  const handleClickCloser = ()=> {
    state.overlay.setPosition(undefined);
    overlayRef.value.blur();
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .overlayPopup {
    width: auto !important;
    @keyframes turn {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    bottom: 17px;
    left: -48px;
    border: none;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px rgba(29, 159, 107, 0.3);
    padding: 0;

    .ol-popup-closer {
      width: 18px;
      height: 18px;
      top: 6px;
      right: 4px;
    }

    .ol-popup-closer:after {
      font-size: 16px;
      color: #409fff;
    }

    .popupContent {
      width: 100%;
      height: 100%;
      position: relative;
      h3.title {
        display: flex;
        align-items: center;
        min-width: 200px;
        margin-bottom: 6px;
        border-radius: 6px 0 0 0;
        overflow: hidden;
        .name {
          min-width: 60%;
          height: 30px;
          position: relative;
          margin-right: 26px;

          &::before {
            content: '';
            width: 100%;
            height: 100%;
            background: linear-gradient(105deg, #409fff 0%, #45dd9b 100%);
            clip-path: polygon(0% 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
            position: absolute;
          }

          p {
            height: 100%;
            padding: 0 20px 0 10px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            color: #fff;
            position: relative;
            z-index: 10;
          }

          .trapezoid {
            position: absolute;
            top: 0;
            right: -6px;
            width: 18px;
            height: 100%;
            background: #43a3f0;
            clip-path: polygon(84% 0%, 100% 0%, 18% 100%, 0% 100%);
          }
        }

        span.time {
          display: flex;
          padding-left: 10px;
          align-items: center;
          white-space: nowrap;
          margin-right: 16px;
          padding-top: 6px;
        }
      }

      .stationImage {
        width: 100%;
        height: 100px;
        overflow: hidden;
        background: #f5f5f5;
        border-radius: 6px;
        box-shadow: 0px 0px 10px 0px rgba(29, 159, 107, 0.3);
        position: absolute;
        bottom: 100px;
      }

      ul.list {
        display: flex;
        flex-direction: column;
        padding: 0 14px 6px 14px;

        li.listItem {
          display: flex;
          align-items: center;
          height: 26px;

          p {
            min-width: 80px;
            white-space:nowrap;
          }

          strong {
            display: inline-block;
            font-size: 12px;
            color: #409fff;
            transform: scale(1, 1.4);
            margin-right: 8px;
          }

          ::v-deep(.greenText) {
            color: green !important;
          }
          ::v-deep(.redText) {
            color: red !important;
          }
          ::v-deep(.blueText) {
            display: inline-block;
            color: #0070ff !important;
          }
        }
      }
    }

    .isOut {
      color: red !important;
      strong {
        color: red !important;
      }
    }
  }
</style>
